<template>
  <div>
    <el-card class="box-card">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="账号" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="角色名称">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.createdAt }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { getUsers } from '@/api/role'

interface userType {
  objectId: string
  username: string
  createdAt: string
  roleName: string
}
let userList = reactive<Array<userType>>([])
const getUser = async () => {
  const res = await getUsers()
  userList = res.data.results
  console.log('131', userList)
}
onMounted(() => {
  getUser()
})

// const handleEdit = (index: number, row: User) => {
//     console.log(index, row)
// }
// const handleDelete = (index: number, row: User) => {
//     console.log(index, row)
// }
// const tableData=reactive[]
</script>

<style scoped></style>
